<template>
  <div :style="style" id="theme">
    <div class="theme-box">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  props: {
    theme_key: [String, Number],
    themeItem: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(["style"]),
  },
  methods: {
    ...mapMutations(["SET_STYLE_THEME"]),
  },
  watch: {
    theme_key: {
      handler: function (key) {
        this["SET_STYLE_THEME"]({
          "--theme-bg": this.themeItem["--theme-bg"],
          "--theme-color": this.themeItem["--theme-color"],
        });
      },
    },
  },
};
</script>

<style lang="scss">
@import "@/layout/theme.scss";
#theme {
  position: relative;
}
.theme-box {
  position: fixed;
  width: 100%;
  height: 100%;
}
</style>
